<template>
    <div @click="changeLanguage()">
        <IconChinese v-if="lang === 'zh'" />
        <IconEnglish v-if="lang === 'en'" />
    </div>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import i18next from 'i18next'

const lang = ref(window.localStorage.getItem('lang') || 'zh')

onMounted(() => {
  const initLang = ref(window.localStorage.getItem('lang') || 'zh')
  i18next.changeLanguage(initLang.value)
})

function changeLanguage() {
  lang.value = lang.value === 'zh' ? 'en' : 'zh'
  window.localStorage.setItem('lang', lang.value)
  i18next.changeLanguage(lang.value)
}
</script>